<template>
  <div class="games-index">
      <header class="games-header">
        <div class="topBtn-container display-flex-con">
          <div :class="['topBtn ranking display-flex-con',activityPage==1?'activityBtn':'']">
            <div class="btn ranking-btn" @click="changePage(1)"><span>游戏排行</span></div>
          </div>
          <div :class="['topBtn newGames display-flex-con',activityPage==2?'activityBtn':'']">
            <div class="btn newGames-btn" @click="changePage(2)"><span>最新游戏</span></div>
          </div>
        </div>
        <div class="icon-container display-flex-con">
          <img src="@/assets/images/sns_icon_w.png">
        </div>
      </header>
      <div class="page-content">
        <rankingpage v-if="activityPage==1"></rankingpage>
        <newgames v-if="activityPage==2"></newgames>
      </div>
  </div>
</template>

<script>
import newgames from '../components/newGames.vue'
import rankingpage from '../components/rankingPage.vue'
export default {
  name: 'index',
  components:{
    newgames,
    rankingpage
  },
  data(){
      return{
          activityPage: 1,
      }
  },
  methods:{
    changePage(num){
      this.activityPage = num;
    }
  }
}
</script>
<style scoped lang='scss'>
.games-index{
  height: 100%;
  .games-header{
    height: 50px;
    padding: 0 20px;
    background: #f7f7f7;
    position: relative;
    .topBtn-container{
      height: 100%;
      .topBtn{
        flex: 1;
        .btn{
          margin: auto;
          padding: 10px;
          border-radius: 100px;
          width: 100px;
          font-size: 14px;
          height: 16px;
          line-height: 16px;
          background: #e2e2e2;
          -webkit-transition: all .18s ease-in .05s;
          transition: all .18s ease-in .05s;
        }
      }
      .topBtn.activityBtn{
        .btn{
          background: #fde101;
          font-weight: 700;
        }
      }
    }
    .icon-container{
      position: absolute;
      height: 100%;
      width: 40px;
      right: 0;
      top: 0;
      bottom: 0;
      img{
        height: 30px;
        width: 30px;
        margin: auto;
      }
    }
  }
  .page-content{
    height: calc(100% - 50px);
  }
}
</style>
